<template>
  <div>
    <input type="text" v-model="val">
    <h2>{{ val }}</h2>
    <h2>{{ a }}</h2>
    <!-- <h2>{{ b }}</h2> -->
    <button @click="fun">修改</button>

    <ul>
      <li v-for="item in arr" :key='item'>{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  // 入口方法 + beforecreated + created = setup
  setup() {
    const val = ref<string | number>('')
    const arr = ref([11, 22, 33, 44, 55, 66])
    // let a = 100
    // let b = 120
    // ref方法是用来定义响应式变量的 
    // 用来定义基本数据类型的响应式  也能传入引入数据类型  ref方法会帮我们调用 reactive方法来实现
    const a = ref(100) //返回一个ref对象
    function fun() {
      // a.value = 1000
      // a.value = 200 //直接把ref覆盖 变为普通值
      arr.value[0] = 100
      arr.value.push(20)
      // console.log(a)
    }
    // 想要在视图层上 使用变量或方法 必须return
    return { a, fun, val, arr }
  }
}
</script>

<style scoped></style>